{% extends '_charge.html' %}
{% import 'public.html' as public %}

{% set DataName='收費記錄' %}

{% block main_contain %}
<div class="row" id="DataManager">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
              <div class="row justify-content-between text-primary" style="font-size: large;">
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#ClassesModal">轉更結算</button>
                <h3>當前更次ID：{{ ClassesID }}</h3>
                <h3>收費處名稱：{{CashierName}}</h3>
                <h3>收費員：{{UserName}}</h3>
                <h3>開始時間：{{StartTime}}</h3>
              </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <table id="DataView" class="table table-bordered table-hover text-center">
                <thead style="font-size: large;">
                <tr>
                  {% for k, v in ColumnName.items() %}
                  {% if k in ('ChargeTime','ChargeType','VehicleType','LicensePlate','TicketNumber','CardNumber','PayMent','Money')%}
                    {% if k == 'Money' %}<th>{{ v }} MOP</th>{%else%}<th>{{ v }}</th>{% endif %}
                  {% endif %}
                  {% endfor %}
                  <th>操作</th>
                </tr>
                </thead>
                <tbody style="font-size: x-large;">
                    {% if TableDatas %}
                    {% for i in TableDatas %}
                    <tr>
                        <td>{{ i.datetime_string(i.ChargeTime) }}</td>
                        <td>{{ ChargeTypes[i.ChargeType] }}</td>
                        <td>{{ VehicleTypes[i.VehicleType] }}</td>
                        <td>{{ i.LicensePlate }}</td>
                        <td>{{ i.TicketNumber }}</td>
                        <td>{{ i.CardNumber }}</td>
                        <td>{{ PayMents[i.PayMent] }}</td>
                        <td>{{ i.Money }}</td>
                        <td>
                          <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#PrintModal" 
                          data-condition="{{ i.ChargeID }}">列印</button>
                          <button class="btn btn-sm btn-danger" data-toggle="modal" data-target="#DeleteModal" 
                          data-condition="{{ i.ChargeID }}" data-money="{{ i.Money }}">刪除</button>
                        </td>
                    </tr>
                    {% endfor %}
                    {% endif %}
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
        </div>
    </div>
  <!--删除-->
  <div class="modal fade" id="DeleteModal" data-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header justify-content-center">
              <h2 class="modal-title text-danger"><i class="fas fa-exclamation-triangle"></i> 請注意</h2>
          </div>
          <div class="modal-body text-center">
              <p class="h5">{[ DeleteData.Message ]}</p>
          </div>
          <div class="modal-footer justify-content-center">
              <button type="button" class="btn btn-success" @click="commit_data('Delete')">確認</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          </div>
        </div>
        <!-- /.modal-content -->
    </div>
  <!-- /.modal-dialog -->
  </div>
  <!--收费打印-->
  <div class="modal fade" id="PrintModal" data-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
          <form id="PrintForm">
              <div class="modal-header justify-content-center">
                <h3>收費憑據</h3>
              </div>
              <div class="modal-body">
                <div v-for="(val, key) in PrintData" class="row justify-content-center">
                  <div class="input-group mb-3 col-sm-11">
                    <div class="input-group-prepend">
                      <span class="input-group-text" style="width: 6em;">{[ ColumnName[key] ]}</span>
                    </div>
                    <select v-if="key=='PayMent'" v-model="PrintData[key]" class="form-control" :name="key" disabled>
                      {% for k, v in PayMents.items() %}
                      <option value="{{ k }}">{{ v }}</option>
                      {% endfor %}
                    </select>
                    <select v-else-if="key=='VehicleType'" v-model="PrintData[key]" class="form-control" :name="key" disabled>
                        {% for k, v in VehicleTypes.items() %}
                        <option value="{{ k }}">{{ v }}</option>
                        {% endfor %}
                    </select>
                    <select v-else-if="key=='ChargeType'" v-model="PrintData[key]" class="form-control" :name="key" disabled>
                      {% for k, v in ChargeTypes.items() %}
                      <option value="{{ k }}">{{ v }}</option>
                      {% endfor %}
                    </select>
                    <input v-else v-model="PrintData[key]" class="form-control" :type="key=='Money'?'number':'text'"
                    :name="key" readonly>
                    <div v-if="key=='Money'" class="input-group-append">
                      <span class="input-group-text">MOP</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-primary">列印</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              </div>
          </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!--转更结算-->
  <div class="modal fade" id="ClassesModal" data-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
          <form id="ClassesForm">
            <div class="modal-header justify-content-center">
              <h3>轉更結算</h3>
            </div>
            <div class="modal-body">
                <div v-for="(val, key) in ClassesData" class="row justify-content-center">
                  <div class="input-group mb-3 col-sm-11">
                    <div class="input-group-prepend">
                      <span class="input-group-text" style="width: 6em;">{[ ClassesName[key] ]}</span>
                    </div>
                    <input v-if="(['ClassesID','CashierName','UserName','StartTime'].includes(key))" v-model="ClassesData[key]" class="form-control" 
                    :name="key" :type="key=='ClassesID'?'number':'text'" readonly>
                    <input v-else v-model="ClassesData[key]" type="number" class="form-control" :name="key" readonly>
                    <div v-if="(['ClassesID','CashierName','UserName','StartTime'].includes(key)==false)" class="input-group-append">
                      <span class="input-group-text">MOP</span>
                    </div>
                  </div>
                </div>
            </div>                      
            <div class="modal-footer justify-content-center">
              <button type="submit" class="btn btn-primary">結算</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
          </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

</div>
{% endblock %}


{% block scripts %}
{{ super() }}
<script>
    // 页面管理器
    var DataManager = new Vue({
        el: '#DataManager',
        delimiters: ['{[', ']}'],
        data: {
          ClassesData:{
            ClassesID: '',
            CashierName: '',
            UserName: '',
            StartTime: '',
            Cash: '',
            UnionPay: '',
            MacauPay: '',
            AliPay: '',
            WeChatPay: '',
            MPay: '',
            Income: '',
          },
          PrintData:{
            ClassesID: '',
            CashierName: '',
            UserName: '',
            ChargeID: '',
            ChargeType: '',
            ChargeTime: '',
            VehicleType: '',
            LicensePlate: '',
            TicketNumber: '',
            CardNumber: '',
            PayMent: '',
            Money: '',
          },
          DeleteData:{
            ChargeID: '',
            Message: '',
          },
          ColumnName: JSON.parse('{{ ColumnNameJSON|safe }}'),
          ClassesName: JSON.parse('{{ ClassesNameJSON|safe }}'),
        },
        methods: {
          // 获取更次
          get_charge_classes(condition){
              axios.post("{{ url_for('charge.classes') }}", {GetClasses:{ClassesID:condition}})
              .then(response => {if(response.status==200){
                  let ret = response.data
                  if(ret.__proto__==Object.prototype){for(key in this.ClassesData){if(ret.hasOwnProperty(key)){this.ClassesData[key]=ret[key]}}}
                  else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
              }})
              .catch(function (error) {alert(error)})
          },
          // 获取凭据
          get_charge_detail(condition){
              axios.post("{{ url_for('charge.classes') }}", {GetData:{ChargeID:condition}})
              .then(response => {if(response.status==200){
                  let ret = response.data
                  if(ret.__proto__==Object.prototype){for(key in this.PrintData){if(ret.hasOwnProperty(key)){this.PrintData[key]=ret[key]}}}
                  else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
              }})
              .catch(function (error) {alert(error)})
          },
          // 提交数据
          commit_data(key){
            let p_data = ''
            switch(key){
              case 'Delete': p_data={Delete: this.DeleteData};break
            }
            axios.post("{{ url_for('charge.classes') }}", p_data)
            .then(response => {
              if(response.status==200){
                  let ret = response.data
                  AppMessage.fire({icon: ret.icon, text: ret.text})
                  if(ret.icon=='success'){
                    if($('#DeleteModal').css('display')=="block"){$("#DeleteModal").modal('toggle')}
                    setTimeout("window.location.reload()", 2000);
                  }
              }else{AppMessage.fire({icon: 'error', text: '操作錯誤，請聯係管理員'})}
            })
            .catch(function (error) {alert(error)})
          }
        },
        mounted: function(){
          $('#DataView').DataTable({
              language: {url: "{{ url_for('static', filename='plugins/DataTables/zh_hk.json') }}"},
              responsive: true,
              autoWidth: false,
              order:[0,'desc']
            });
          // 更次
          $("#ClassesModal").on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget) 
            let condition = button.data('condition') 
            DataManager.get_charge_classes(condition)
          });
          // 打印
          $("#PrintModal").on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget) 
            let condition = button.data('condition') 
            DataManager.get_charge_detail(condition)
          });
          // 删除
          $("#DeleteModal").on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget) 
            let condition = button.data('condition')
            let money = button.data('money')
            DataManager.DeleteData.ChargeID = condition
            DataManager.DeleteData.Message = "確認刪除金額 " + String(money) + "MOP的收費記錄嗎？"
          });
        }
    });

</script>
{% endblock %}




